import React, { Component } from 'react'




// https://www.infoq.cn/article/hMb0TSo_dDPpTNDPkmAr


// 1.2 用户登录
// 2. 登录功能
// ① 添加状态：username（账号） 和 password（密码）。
// ② 使用受控组件方式获取表单元素值。
// ③ 给 form 表单添加 onSubmit。
// ④ 创建方法 handleSubmit，实现表单提交。
// ⑤ 在方法中，通过 username 和 password 获取到账号和密码。
// ⑥ 使用 API 调用登录接口，将 username 和 password 作为参数。
// ⑦ 判断返回值 status 为 200 时，表示登录成功。
// ⑧ 登录成功后，将token 保存到本地存储中（hkzf_token）。
// ⑨ 返回登录前的页面。

import { Toast, WhiteSpace ,WingBlank} from 'antd-mobile';
import { createForm } from 'rc-form';


import NavHeader from '../../components/NavHeader/NavHeader'


import styles from './index.module.css'

// 导入封装好的reqLogin 方法 
import {reqHotCity, reqLogin} from '../../utils/index'



 class LoginIndex extends Component {


    constructor() {
        super()
        this.state={
            username:'',
            password:''

        }
    }

    OnChangeUser=(e)=>{
        this.setState({
            username: e.target.value
          })

    }


    OnChangePwd=(e)=>{
        this.setState({
            password: e.target.value
          })


    }
    handleSubmit=  async  (e)=> {
       

        e.preventDefault()  // 阻止表单默认提示事件  （会刷新）
      
        // console.log(this.state)
        let  {username,password}=this.state

      try {
        let  res=  await reqLogin(this.state)

        // console.log(res)
   //      body: null
   // description: "你的账号或者密码异常"
   // status: 400
        var  {body,description,status}=res

        console.log(description)

        console.log(status)
       
        console.log(body)
       
   
       
          
      } catch (error) {

        console.log(error)
          
      }


      if(status!=200) {
        Toast.fail(description);


     }else {

        var token=body.token

        localStorage.setItem('hkzf_token',token)
        this.props.history.go(-1)






     }





    }


    render() {

 
        return (
    
              
            <div className={styles.root}>
            {/* 顶部导航 */}
            <NavHeader className={styles.navHeader}>账号登录</NavHeader>
            <WhiteSpace size="xl" />
          
            {/* 登录表单 */}
            <WingBlank>
              <form  onSubmit={this.handleSubmit}>
                <div className={styles.formItem}>
                  <input
                    className={styles.input}
                    name="username"
                    placeholder="请输入账号"
                    onChange={this.OnChangeUser}

                  />
                </div>
                {/* 长度为5到8位，只能出现数字、字母、下划线 */}
                {/* <div className={styles.error}>账号为必填项</div> */}
                <div className={styles.formItem}>
                  <input
                    className={styles.input}
                    name="password"
                    type="password"
                    placeholder="请输入密码"
                    onChange={this.OnChangePwd}

                  />
                </div>
                {/* 长度为5到12位，只能出现数字、字母、下划线 */}
                {/* <div className={styles.error}>账号为必填项</div> */}
                <div className={styles.formSubmit}>
                  <button className={styles.submit} type="submit">
                    登 录
                  </button>
                </div>
              </form>
              {/* <Flex className={styles.backHome}>
                <Flex.Item>
                  <Link to="/registe">还没有账号，去注册~</Link>
                </Flex.Item>
              </Flex> */}
            </WingBlank>
          </div>
             
               

          
        )
    }
}


// const BasicInputExampleWrapper = createForm()(LoginIndex);


// export default  BasicInputExampleWrapper
export default  LoginIndex